<template>
  <BasicLayout>
    <template #wrapper>
      <div style="margin-top: 20px">
        <span style="font-size: 16px">购买流量包</span>
      </div>
      <el-divider></el-divider>
      <el-form ref="orderForm" :model="orderForm" label-width="100px">
        <el-form-item label="账户余额：" prop="remainAmount">
          {{ orderForm.remainAmount }} 元
        </el-form-item>
        <el-form-item label="流量余额：" prop="remainRights">
          {{ orderForm.remainRights }} 次
        </el-form-item>
        <!--        <el-form-item label="有效期：" prop="name">-->
        <!--          <el-input style="width: 200px" v-model="orderForm.expire" readonly="true"/>-->
        <!--        </el-form-item>-->
        <el-form-item label="购买数量:" prop="name">
          <el-select v-model="orderForm.rightsId" @change="changeConfig" placeholder="请选择套餐">
            <el-option
              v-for="item in rightsConfigs"
              :key="item.costs"
              :label="item.products"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="价格" prop="name">
          <el-input style="width: 200px" v-model="orderForm.amountDesc" readonly="true"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addOrder">购买</el-button>
        </el-form-item>
        <el-form-item>
          <el-table
            :data="tableData"
            style="width: 360px">
            <el-table-column
              prop="amount"
              label="流量数/点击数量"
              align="center"
              width="180">
            </el-table-column>
            <el-table-column
              prop="pay"
              align="center"
              label="收费"
              width="180">
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-form-item>
          <div>
            <span>
              【流量说明】<br>
           本站流量购买有效期为12个月<br>
              <br>
           因近期频繁【恶意攻击】和【非法网站导流】<br>
           事件频发，为维护网站安全性，我们已启用"链接信用分"系统：<br>
           遭到大量投诉举报的链接将自动扣减信用分，信用分越低，流量消耗越快<br>
            </span>
          </div>
        </el-form-item>
      </el-form>
    </template>
  </BasicLayout>
</template>

<script>
  import {addRechargeOrder, addTOrder, getRightsConfig, updateTOrder} from '@/api/torder'
  import {getAccount} from '@/api/tuser'
  import store from '@/store'

  export default {
    name: 'OrderRightsAdd',
    components: {},
    data() {
      return {
        tableData: [{
          amount: '1000次',
          pay: '¥ 8',
        }, {
          amount: '2000次',
          pay: '¥ 15',
        }, {
          amount: '5000次',
          pay: '¥ 30',
        }, {
          amount: '1万次',
          pay: '¥8',
        }, {
          amount: '1万次',
          pay: '¥ 50',
        }, {
          amount: '10万次',
          pay: '¥ 300',
        }, {
          amount: '100万次',
          pay: '¥ 1500',
        }, {
          amount: '200万次',
          pay: '¥ 1800',
        }, {
          amount: '500万次',
          pay: '¥ 2500',
        }, {
          amount: '1000万次',
          pay: '¥ 4500',
        }, {
          amount: '2000万次',
          pay: '¥8000',
        }, {
          amount: '5000万次',
          pay: '¥12000',
        }, {
          amount: '无限流量',
          pay: '¥ 40000',
        }],
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 总条数
        total: 0,
        // 弹出层标题
        title: '',
        // 是否显示弹出层
        open: false,
        isEdit: false,
        fileOpen: false,
        fileIndex: undefined,
        // 类型数据字典
        typeOptions: [],
        torderList: [],

        // 关系表类型

        // 查询参数
        queryParams: {
          pageIndex: 1,
          pageSize: 10,

        },
        // 表单参数
        orderForm: {
          remainAmount: "",
          remainRights: "",
          amount: "",
          expire: "12个月"
        },
        openConfirm: false,
        // 表单校验
        rules: {},
        rightsConfigs: [],
        rightsConfigsMap: {}
      }
    },
    created() {
      this.getUserAccount()
      this.getRights()
    },
    methods: {
      getRights() {
        getRightsConfig().then(response => {
          if (response.code === 200) {
            this.rightsConfigs = response.data
            console.log(this.rightsConfigs)
            this.rightsConfigs.forEach(value => {
              this.rightsConfigsMap[value.id] = value
            })
          }
        })
      },
      /** 查询参数列表 */
      getUserAccount() {
        getAccount(parseInt(store.getters.userId)).then(response => {
          if (response.code === 200) {
            this.orderForm.remainAmount = response.data.amount
            this.orderForm.remainRights = response.data.remainRights
            this.orderForm.userId = parseInt(store.getters.userId)
          }
        })
      },
      changeConfig(val) {
        this.orderForm.amount = this.rightsConfigsMap[val].costs
        this.orderForm.amountDesc = this.orderForm.amount + "元"
      },
      addOrder() {
        this.orderForm.userId = parseInt(store.getters.userId)
        addTOrder(this.orderForm).then(response => {
          if (response.code == 200) {
            this.$message({
              message: '购买成功',
              type: 'success'
            });
            this.getUserAccount()
          } else {
            this.$message({
              message: '购买失败',
              type: 'error'
            });
          }
        })
      },
      // 取消按钮
      cancel() {
        this.open = false
        this.reset()
      },
      // 表单重置
      reset() {
        this.form = {

          OID: undefined,
          userId: undefined,
          orderNo: undefined,
          payType: undefined,
          amount: undefined,
          status: undefined,
          minusAmount: undefined,
          ip: undefined,
        }
        this.resetForm('form')
      },
      getImgList: function () {
        this.form[this.fileIndex] = this.$refs['fileChoose'].resultList[0].fullUrl
      },
      fileClose: function () {
        this.fileOpen = false
      },
      /** 提交按钮 */
      submitForm: function () {
        this.$refs['form'].validate(valid => {
          if (valid) {
            if (this.form.OID !== undefined) {
              updateTOrder(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('修改成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            } else {
              addRechargeOrder(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess('新增成功')
                  this.open = false
                  this.getList()
                } else {
                  this.msgError(response.msg)
                }
              })
            }
          }
        })
      },
    }
  }
</script>
